import { A, Route, Router } from "@solidjs/router";
import { lazy, Suspense, type Component, type ParentComponent } from "solid-js";
import Spinner from "./components/Spinner";

const Layout: ParentComponent = (props) => {
  return (
    <>
      <nav>
        <ul class="d-menu d-menu-horizontal">
          <li>
            <A href="/services" activeClass="d-menu-active">
              Services
            </A>
          </li>
          <li>
            <A href="/routes" activeClass="d-menu-active">
              Routes
            </A>
          </li>
          <li>
            <A href="/clusters" activeClass="d-menu-active">
              Clusters
            </A>
          </li>
          <li>
            <A href="/snapshots" activeClass="d-menu-active">
              Snapshots
            </A>
          </li>
          <li>
            <A href="/certs" activeClass="d-menu-active">
              Certs
            </A>
          </li>
        </ul>
      </nav>
      <div class="flex-1">
        <Suspense
          fallback={
            <div class="px-2">
              <Spinner />
            </div>
          }
        >
          {props.children}
        </Suspense>
      </div>
    </>
  );
};

const App: Component = () => {
  return (
    <Router root={Layout}>
      <Route
        path={"/services"}
        component={lazy(() => import("./pages/services"))}
      ></Route>
      <Route
        path={"/routes"}
        component={lazy(() => import("./pages/routes"))}
      />
      <Route
        path={"/clusters"}
        component={lazy(() => import("./pages/clusters"))}
      />
      <Route
        path={"/snapshots"}
        component={lazy(() => import("./pages/snapshots"))}
      />
      <Route path={"/certs"} component={lazy(() => import("./pages/certs"))} />
    </Router>
  );
};

export default App;
